<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="pc图片" :label-width="formLabelWidth" prop="pcImage">
				<fortress-upload type="image" name="pcImage" :formData="form"></fortress-upload>
				<resource-select modelName="form.pcImage" type="image" @choosed="resourceChoosed"></resource-select>
			</el-form-item>
			<el-form-item label="app图片" :label-width="formLabelWidth" prop="appImage">
				<fortress-upload type="image" name="appImage" :formData="form"></fortress-upload>
				<resource-select modelName="form.appImage" type="image" @choosed="resourceChoosed"></resource-select>
			</el-form-item>
			<el-form-item label="跳转链接" :label-width="formLabelWidth" prop="url">
				<el-input v-model="form.url" autocomplete="off" placeholder="请输入跳转链接"></el-input>
			</el-form-item>
			<el-form-item label="标签" :label-width="formLabelWidth" prop="tags">
				<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
					{{ tag }}
				</el-tag>
				<el-input
					class="input-new-tag"
					v-if="inputVisible"
					v-model="inputValue"
					ref="saveTagInput"
					size="small"
					@keyup.enter.native="handleInputConfirm"
					@blur="handleInputConfirm"
				></el-input>
				<el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
			</el-form-item>
			<el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
				<el-input-number v-model="form.sort" label="请输入排序"></el-input-number>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { cmsbannerInfo, cmsbannerSave, cmsbannerEdit } from "@/api/cms/cmsbanner.js"
import ResourceSelect from "@/components/resource-select.vue"
import { ct } from "@/mixins/mixmethod.js"
export default {
	mixins: [ct],
	data() {
		return {
			visible: false,
			form: {
				pcImage: "",
				appImage: "123",
				url: "",
				tags: "",
				sort: "",
			},
			dynamicTags: [],
			inputVisible: false,
			inputValue: "",
			formLabelWidth: "120px",
			rules: {},
		}
	},
	created() {},
	components: {
		"resource-select": ResourceSelect,
	},
	methods: {
		init(id) {
			this.resetForm()
			//修改
			if (id) {
				cmsbannerInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
							if (this.form.tags) {
								this.dynamicTags = this.form.tags.split(";")
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.dynamicTags) {
						this.form.tags = this.dynamicTags.join(";")
					}
					console.log(this.form)
					//修改
					if (this.form.id) {
						cmsbannerEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						cmsbannerSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				pcImage: "",
				appImage: "",
				url: "",
				tags: "",
				sort: "",
			}
			this.dynamicTags = []
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		//动态标签
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
		},

		showInput() {
			this.inputVisible = true
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},

		handleInputConfirm() {
			let inputValue = this.inputValue
			if (inputValue) {
				this.dynamicTags.push(inputValue)
			}
			this.inputVisible = false
			this.inputValue = ""
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>
